{% extends "base.html" %}
{% block body %}
{% import "bootstrap/wtf.html" as wtf %}
</br>
<div class="row">
    <div class="col" style="position: relative; left: 20px;">
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group" role="group" aria-label="">
                <button class="btn btn-info" data-toggle="modal" data-target="#UploadModal">打开</button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button class="btn btn-info" onclick="undo();">撤销</button>
                <button class="btn btn-info" onclick="redo();">重做</button>
                <button class="btn btn-info" onclick="getOrg();">原图</button>
            </div>
            <div class="btn-group" role="group" aria-label="">
                <button class="btn btn-info" onclick="share();">分享</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="UploadModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">打开图片</h4>
            </div>
            <div class="modal-body">
                {{ wtf.quick_form(upload_file_form, button_map={'photo': 'secondary', 'submit': 'secondary'}) }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<script>
    function share() {
        $.ajax({
            url: "/share",
            type: "GET",
            dataType: "text",
            success: function(data) {
                console.log("in share of javascript");
                console.log(data);
                window.location.href = "/";
            }
        });
    };
    function getOrg() {
        console.log("before send org request");
        $.ajax({
            url: "/org",
            type: "GET",
            dataType: "text",
            success: function(data) {
                console.log("orign success");
                // console.log(data);
                window.location.href="/";
            }
        });
    }
    function undo() {
        $.ajax({
            url: "/undo",
            type: "GET",
            dataType: "text",
            success: function(data) {
                console.log("undo over");
                window.location.href="/";
            }
        });
    }
    function redo() {
        $.ajax({
            url: "/redo",
            type: "GET",
            dataType: "text",
            success: function() {
                console.log("redo over");
                window.location.href="/";
            }
        });
    }
</script>

{% endblock %}
